<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage" %>

<asp:Content ID="Content3" ContentPlaceHolderID="HeadContent" runat="server">
    <% Ajax.RenderResources<CollapsiblePanelExtender>(); %>
    <% Ajax.RenderResources<TextBoxWatermarkExtender>(); %>
</asp:Content>
<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
    TextBoxWatermark Demonstration
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <div class="demoarea">
        <div class="demoheading">
            TextBoxWatermark Demonstration</div>
        <% using (Ajax.BeginForm("GreetingsText", new AjaxOptions()
           {
               UpdateTargetId = "GreetingsText",
           }))
           { %>
        First name:
        <%= Html.TextBox("FirstName", null, new { @class = "unwatermarked", style = "width: 150px;" })%><br />
        <% Ajax.RegisterScript(new TextBoxWatermarkExtender("FirstName")
           {
               WatermarkText = "Type First Name Here",
               WatermarkCssClass = "watermarked",
           }); %>
        Last name:
        <%= Html.TextBox("LastName", null, new { @class = "unwatermarked", style="width: 150px;" })%><br />
        <br />
        <% Ajax.RegisterScript(new TextBoxWatermarkExtender("LastName")
           {
               WatermarkText = "Type Last Name Here",
               WatermarkCssClass = "watermarked",
           }); %>
        <input type="submit" name="test" />
        <br />
        <br />
        <div id="GreetingsText">
            <%  Html.RenderPartial("GreetingsText"); %>
        </div>
        <% } %>
    </div>
    <div class="demobottom">
    </div>
    <div id="Description_HeaderPanel" style="cursor: pointer;">
        <div class="heading">
            <img id="Description_ToggleImage" src="/Content/Images/collapse.jpg" alt="collapse" />
            TextBoxWatermark Description
        </div>
    </div>
    <div id="Description_ContentPanel" style="overflow: hidden;">
        <p>
            TextBoxWatermark is an ASP.NET AJAX extender that can be attached to an ASP.NET
            TextBox control to get "watermark" behavior. When a watermarked TextBox is empty,
            it displays a message to the user with a custom CSS style. Once the user has typed
            some text into the TextBox, the watermarked appearance goes away. The typical purpose
            of a watermark is to provide more information to the user about the TextBox itself
            without cluttering up the rest of the page.
        </p>
    </div>
    <% Ajax.RegisterScript(new CollapsiblePanelExtender("Description_ContentPanel")
       {
           ExpandControlID = "Description_HeaderPanel",
           CollapseControlID = "Description_HeaderPanel",
           Collapsed = false,
           ImageControlID = "Description_ToggleImage",
           ExpandedImage = "/Content/Images/collapse.jpg",
           CollapsedImage = "/Content/Images/expand.jpg",

       }); %>
    <div id="Properties_HeaderPanel" style="cursor: pointer;">
        <div class="heading">
            <img id="Properties_ToggleImage" src="/Content/images/expand.jpg" alt="collapse" />
            TextBoxWatermark Properties
        </div>
    </div>
    <div id="Properties_ContentPanel" style="overflow: hidden; height: 0px">
        <p>
            The control above is initialized with this code. The <em>italic</em> properties
            are optional:
        </p>
        <pre>Ajax.RegisterScript(new TextBoxWatermarkExtender("TextBox1") {
        WatermarkText = "Type First Name Here"
        <em>WatermarkCssClass</em> = "watermarked" });</pre>
        <ul>
            <li><strong>Constructor parameter</strong> - The ID of the TextBox to operate on.</li>
            <li><strong>WatermarkText</strong> - The text to show when the control has no value</li>
            <li><strong>WatermarkCssClass</strong> - The CSS class to apply to the TextBox when
                it has no value (e.g. the watermark text is shown).</li>
        </ul>
    </div>
    <% Ajax.RegisterScript(new CollapsiblePanelExtender("Properties_ContentPanel")
       {
           ExpandControlID = "Properties_HeaderPanel",
           CollapseControlID = "Properties_HeaderPanel",
           Collapsed = true,
           ImageControlID = "Properties_ToggleImage",
           ExpandedImage = "/Content/Images/collapse.jpg",
           CollapsedImage = "/Content/Images/expand.jpg",
       }); %>
</asp:Content>